<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Nixon : Invoice Editable</title>

    <!-- ================= Favicon ================== -->
    <!-- Standard -->
    <link rel="shortcut icon" href="http://placehold.it/64.png/000/fff">
    <!-- Retina iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="144x144" href="http://placehold.it/144.png/000/fff">
    <!-- Retina iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="114x114" href="http://placehold.it/114.png/000/fff">
    <!-- Standard iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="72x72" href="http://placehold.it/72.png/000/fff">
    <!-- Standard iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="57x57" href="http://placehold.it/57.png/000/fff">

    <!-- Styles -->
    <link href="assets/fontAwesome/css/fontawesome-all.min.css" rel="stylesheet">
    <link href="assets/css/lib/themify-icons.css" rel="stylesheet">
    <link href="assets/css/lib/mmc-chat.css" rel="stylesheet" />
    <link href="assets/css/lib/sidebar.css" rel="stylesheet">
    <link href="assets/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/lib/nixon.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
</head>

<body>

    <div class="sidebar sidebar-hide-to-small sidebar-shrink sidebar-gestures">
        <div class="nano">
            <div class="nano-content">
                <ul>
                    <li class="active"><a class="sidebar-sub-toggle"><i class="ti-home"></i> Dashboard <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                        <ul>
                            <li><a href="index.html">Dashboard 1</a></li>
                             
                        </ul>
                    </li>					
					
                      
                      
                    <li><a href="app-profile.html"><i class="ti-user"></i> Profile</a></li>
                    <li><a href="app-widget-card.html"><i class="ti-layout-grid2-alt"></i> Widget</a></li>					
					
					<li><a class="sidebar-sub-toggle"><i class="ti-layout"></i> UI Elements <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                        <ul>
                            <li><a href="ui-accordion.html">Accordion</a></li>
                            <li><a href="ui-alerts.html">Alerts</a></li>
                            <li><a href="ui-badges.html">Badges</a></li>
                            <li><a href="ui-button.html">Button</a></li>
                            <li><a href="ui-dropdown.html">Dropdown</a></li>
                            <li><a href="ui-Images.html">Images</a></li> 
                             
                        </ul>
                    </li>
					<li><a class="sidebar-sub-toggle"><i class="ti-panel"></i> Components <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                        <ul>
                            <li><a href="uc-calendar.html">Calendar</a></li>
                            <li><a href="uc-carousel.html">Carousel</a></li>
                              
                            <li><a href="uc-datamap.html">Datamap</a></li>
                            <li><a href="uc-todo-list.html">To do</a></li>
                            <li><a href="uc-scrollable.html">Scrollable</a></li>
                            <li><a href="uc-sweetalert.html">Sweet Alert</a></li>
                            <li><a href="uc-toastr.html">Toastr</a></li>
                            <li><a href="uc-range-slider-basic.html">Basic Range Slider</a></li>
                            <li><a href="uc-range-slider-advance.html">Advance Range Slider</a></li>
                            <li><a href="uc-nestable.html">Nestable</a></li>
                            <li><a href="uc-portlets.html">Portlets</a></li>
                              
                        </ul>
                    </li>
					<li><a class="sidebar-sub-toggle"><i class="ti-bar-chart-alt"></i>  Charts  <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                        <ul>
                            <li><a href="chart-flot.html">Flot</a></li>
                              
                        </ul>
                    </li>	
					
					<li><a class="sidebar-sub-toggle"><i class="ti-layout-grid4-alt"></i> Table <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                        <ul>
                            <li><a href="table-basic.html">Basic</a></li> 
                        </ul>
                    </li>
					
					<li><a class="sidebar-sub-toggle"><i class="ti-heart"></i> Icons <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                        <ul>
                            <li><a href="font-themify.html">Themify</a></li>
                        </ul>
                    </li>
					
					 					
					
					<li><a href="form-basic.html"><i class="ti-view-list-alt"></i> Basic Form </a></li>					
					
					<li><a class="sidebar-sub-toggle"><i class="ti-files"></i> Invoice <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                        <ul>
                            <li><a href="invoice.html">Basic</a></li>
                            <li><a href="invoice-editable.html">Editable</a></li>
                        </ul>
                    </li>
					
					<li><a class="sidebar-sub-toggle"><i class="ti-target"></i> Pages <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                        <ul>
                            <li><a href="page-login.html">Login</a></li>
                            <li><a href="page-register.html">Register</a></li>
                            <li><a href="page-reset-password.html">Forgot password</a></li>
                        </ul>
                    </li>
					
                    <li><a target="_blank" href="#"><i class="ti-file"></i> Documentation</a></li><li><a><i class="ti-close"></i> Logout</a></li>

                </ul>
            </div>
        </div>
    </div><!-- /# sidebar -->




    <div class="header">
        <div class="pull-left">
                        <div class="logo">
                <a href="index.html">
                    <img id="logoImg" 
                    src="logo/logo.png" 
                    data-logo_big="logo/logo.png"
                    data-logo_small="logo/logoSmall.png"
                    alt="Nixon" />
                </a>
            </div>
            <div class="hamburger sidebar-toggle">
                <span class="ti-menu"></span>
            </div>
        </div>

        <div class="pull-right p-r-15">
            <ul>
                <li class="header-icon dib"><i class="ti-bell"></i>
                    <div class="drop-down">
                        <div class="dropdown-content-heading">
                            <span class="text-left">Recent Notifications</span>
                        </div>
                        <div class="dropdown-content-body">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Mr. Jane</div>
                                            <div class="notification-text">5 members joined today </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Mariam</div>
                                            <div class="notification-text">likes a photo of you</div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Tasnim</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Jane Roe</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>
                                <li class="text-center">
                                    <a href="#" class="more-link">See All</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="header-icon dib"><i class="ti-email"></i>
                    <div class="drop-down">
                        <div class="dropdown-content-heading">
                            <span class="text-left">2 New Messages</span>
                            <a href="app-email.html"><i class="ti-pencil-alt pull-right"></i></a>
                        </div>
                        <div class="dropdown-content-body">
                            <ul>
                                <li class="notification-unread">
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/1.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Jane Doe</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>

                                <li class="notification-unread">
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/2.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Jane Roe</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Jane Doe</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/2.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Jane Roe</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>
                                <li class="text-center">
                                    <a href="#" class="more-link">See All</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="header-icon dib"><img class="avatar-img" src="assets/images/avatar/1.jpg" alt="" /> <span class="user-avatar">Jane <i class="ti-angle-down f-s-10"></i></span>
                    <div class="drop-down dropdown-profile">
                        <div class="dropdown-content-heading">
                            <span class="text-left">Upgrade Now</span>
                            <p class="trial-day">30 Days Trail</p>
                        </div>
                        <div class="dropdown-content-body">
                            <ul>
                                <li><a href="#"><i class="ti-user"></i> <span>Profile</span></a></li>
                                <li><a href="#"><i class="ti-wallet"></i> <span>My Balance</span></a></li>
                                <li><a href="#"><i class="ti-write"></i> <span>My Task</span></a></li>
                                <li><a href="#"><i class="ti-calendar"></i> <span>My Calender</span></a></li>
                                <li><a href="#"><i class="ti-email"></i> <span>Inbox</span></a></li>
                                <li><a href="#"><i class="ti-settings"></i> <span>Setting</span></a></li>
                                <li><a href="#"><i class="ti-help-alt"></i> <span>Help</span></a></li>
                                <li><a href="#"><i class="ti-lock"></i> <span>Lock Screen</span></a></li>
                                <li><a href="#"><i class="ti-power-off"></i> <span>Logout</span></a></li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>




    <div class="content-wrap">
        <div class="main">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-8 p-0">
                        <div class="page-header">
                            <div class="page-title">
                                <h1>Dashboard</h1>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 p-0">
                        <div class="page-header">
                            <div class="page-title">
                                <ol class="breadcrumb text-right">
                                    <li><a href="#">Dashboard</a></li>
                                    <li><a href="#">Pages</a></li>
                                    <li class="active">Invoice</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-content">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card alert">
                                <div class="card-header">
                                    <h4>Invoice Editable </h4>
                                    <div class="card-header-right-icon">
                                        <ul>
                                            <li class="card-close" data-dismiss="alert"><i class="ti-close"></i></li>
                                             
                                        </ul>
                                    </div>
                                </div>
                                <div class="invoice-edit">
									<div class="row">
										<div class="col-lg-12">
											<div class="control-bar">
												<label for="config_tax">VAT:
													<input type="checkbox" id="config_tax" />
												</label>
												<label for="config_tax_rate" class="taxrelated">Rate:
													<input type="text" id="config_tax_rate" value="19" />%
												</label>
												<label for="config_note">Remark:
													<input type="checkbox" id="config_note" />
												</label>
												<label for="config_date">Performance Date:
													<input type="checkbox" id="config_date" />
												</label>
												<div class="pull-right dib">
													<a class="bg-success" href="javascript:window.print()">Print</a>
												</div>
											</div>
										</div>
									</div>
                                    

                                    <div class="row">
										<div class="col-lg-5">
											<div class="me" contenteditable>
												<p>
													<strong>HTML Cooker – Web Architect</strong>
													<br> South Mugda
													<br> Dhaka, 1214
													<br> Bangladesh
												</p>
											</div>
                                        </div>
                                        <!--.col-->
										<div class="col-lg-3" >
											<div class="info " contenteditable>
												<p>
													Web: <a href="http://htmlcooker.com">www.htmlcooker.com</a>
													<br> Mail: <a href="mailto:hello@htmlcooker.com">hello@htmlcooker.com</a>
													<br> Tel: +8801629599859
													<br> Twitter: @htmlcooker
												</p>
											</div>
                                        </div>

										<div class="col-lg-4" >
											<div class="bank text-right" contenteditable>
												<p>
													Bank : Bangladesh Bank
													<br> Address: Dhaka, Bangladesh
													<br> IBAN: 123-45841-25685
													<br> BIC: 21457-415
												</p>
											</div>
                                        </div>
                                        <!--.col-->
                                    </div>


                                    <div class="row">

                                        <div class="col-lg-12">
                                            <p contenteditable class="smallme m-t-30">John Doe · South Mugda · Dhaka, 1214 </p>

                                            <p contenteditable class="client">
                                                <strong>Mariam</strong>
                                                <br> South Mugda
                                                <br> Dhaka, 1214, Bangladesh
                                            </p>
                                        </div>
                                    </div>
									<div class="row m-t-30">
                                        <!--.col-->
                                        <div class="col-lg-6">
                                            <h3  class="bill" contenteditable>Invoice</h3>
                                        </div>
                                        <!--.col-->
                                        <div class="col-lg-6 text-right">
                                            <p contenteditable class="details">
                                                Date of invoice:
                                                <input type="text" class="datePicker" />
                                                <br> Invoice number:
                                                <input type="text" value="1241" />
                                                <br> Payable to:
                                                <input class="twoweeks" type="text" />
                                            </p>
                                        </div>
                                        <!--.col-->

                                    </div>
                                    <!--.row-->

                                    <div class="invoicelist-body">
                                        <table class="table table-responsive">
                                            <thead contenteditable>
												<tr>
													<th>Name</th>
													<th>Description</th>
													<th class="daterelated">Date</th>
													<th class="w10pr">Number</th>
													<th class="w12pr">Rate</th>
													<th class="taxrelated">VAT</th>
													<th class="w10pr">Price</th>
												</tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><a class="control removeRow" href="#">x</a> <span contenteditable> T Shirt</span></td>
                                                    <td><span contenteditable>Black and White</span></td>
                                                    <td class="daterelated"><span contenteditable>Date</span></td>
                                                    <td class="amount">
                                                        <input type="text" value="1" />
                                                    </td>
                                                    <td class="rate">
                                                        <input type="text" value="60" />
                                                    </td>
                                                    <td class="tax taxrelated"></td>
                                                    <td class="sum"></td>
                                                </tr>
                                                <tr>
                                                    <td><a class="control removeRow" href="#">x</a> <span contenteditable> T Shirt</span></td>
                                                    <td><span contenteditable>Black and White</span></td>
                                                    <td class="daterelated"><span contenteditable>Date</span></td>
                                                    <td class="amount">
                                                        <input type="text" value="1" />
                                                    </td>
                                                    <td class="rate">
                                                        <input type="text" value="60" />
                                                    </td>
                                                    <td class="tax taxrelated"></td>
                                                    <td class="sum"></td>
                                                </tr>
                                                <tr>
                                                    <td><a class="control removeRow" href="#">x</a> <span contenteditable> T Shirt</span></td>
                                                    <td><span contenteditable>Black and White</span></td>
                                                    <td class="daterelated"><span contenteditable>Date</span></td>
                                                    <td class="amount">
                                                        <input type="text" value="1" />
                                                    </td>
                                                    <td class="rate">
                                                        <input type="text" value="60" />
                                                    </td>
                                                    <td class="tax taxrelated"></td>
                                                    <td class="sum"></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <a class="control newRow" href="#">+ New ROW</a>
                                    </div>
                                    <!--.invoice-body-->

                                    <div class="invoicelist-footer">
                                        <table>
                                            <tr class="taxrelated">
                                                <td>VAT:</td>
                                                <td id="total_tax"></td>
                                            </tr>
                                            <tr>
                                                <td><strong>Total:</strong></td>
                                                <td id="total_price"></td>
                                            </tr>
                                        </table>
                                    </div>

                                    <div class="note">
                                        <h2 class="dib">Remark:</h2>
										<p contenteditable class="dib"> Lorem Ipsum dummy text</p>
                                    </div>
                                    <!--.note-->

                                    <div class="row">
                                        <div class="col-lg-12 text-center m-t-50">
                                            <p class="notaxrelated pull-left" contenteditable>Pursuant to § 19 UStG, the invoice does not include any VAT</p>
                                            <p contenteditable class="notdaterelated pull-right">
                                                All right reaserved, Copyright @2017
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /# card -->
                        </div>
                        <!-- /# column -->
                    </div>
                    <!-- /# row -->     </div>
     <!-- /# main content -->More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
            </div>
            <!-- /# container-fluid -->
        </div>
        <!-- /# main -->
    </div>
    <!-- /# content wrap -->







    <script src="assets/js/lib/jquery.min.js"></script>
    <!-- jquery vendor -->
    <script src="assets/js/lib/jquery.nanoscroller.min.js"></script>
    <!-- nano scroller -->
    <script src="assets/js/lib/sidebar.js"></script>
    <!-- sidebar -->
    <script src="assets/js/lib/bootstrap.min.js"></script>
    <!-- bootstrap -->
    <script src="assets/js/lib/mmc-common.js"></script>
    <script src="assets/js/lib/mmc-chat.js"></script>
    <script src="assets/js/lib/invoice-edit.js"></script>
    <script src="assets/js/scripts.js"></script>
    <!-- scripit init-->





</body>

</html>